<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shop</title>
    <link rel="stylesheet" href="../css/cssreset.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/shop.css">
    <link rel="shortcut icon" href="../favicon.ico" />
    <script src="../js/iconfont.js"></script>
</head>
<body>
<header class="container">
    <nav class="col-md-12 col-sm-12 col-xs-12">
        <a href="../index.html" class="top_logo"><img src="../images/e93962cbac2ca6e4a95331f925a7b32d9127465b.svg" alt=""></a>
        <ul class="top_left">
            <li>
                <a href="../index.html">subscribe</a>
            </li>
            <li class="active"><a href="#">shop</a></li>
            <li><a href="about_us.html">about</a></li>
            <li><a href="UK_help.html">help</a></li>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liwu"></use>
                    </svg>
                    rewards
                </a>
            </li>
        </ul>
        <ul class="top_right">
            <li class="uk lang">
                <p><a href=""><span></span>uk<b class="caret"></b></a></p>
                <ol class="changelang">
                    <li><a href=""><span class="ico_one"></span>ireland</a></li>
                    <li><a href=""><span class="ico_two"></span>nederland</a></li>
                </ol>
            </li>
            <li class="login">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yonghu"></use>
                </svg>
                <a href="login.html" class="logincss">login</a>
            </li>
        </ul>
    </nav>
</header>

<div class="banner col-md-12 col-sm-12 col-xs-12">
    <div class="container">
        <div class="banner_left row col-md-12 col-sm-12 col-xs-12">
            <p class="shop_dropdown">
                <a href="#">shop by category</a>
            </p>
            <ul class="shop_dropdownmenu col-md-12 col-sm-12 col-xs-12" role="menu">
                <li class="col-md-3 col-sm-12 col-xs-12"><a>new</a></li>
                <li class="col-md-3 col-sm-12 col-xs-12"><a>super snackers</a></li>
                <li class="col-md-3 col-sm-12 col-xs-12"><a>bestsellers</a></li>
                <li class="col-md-3 col-sm-12 col-xs-12"><a>flapjacks</a></li>
                <li class="col-md-3 col-sm-12 col-xs-12"><a>crunch range</a></li>
                <li class="col-md-3 col-sm-12 col-xs-12"><a>sweet</a></li>
                <li class="col-md-3 col-sm-12 col-xs-12"><a>chocolate</a></li>
                <li class="col-md-3 col-sm-12 col-xs-12"><a>savoury</a></li>
                <li class="col-md-3 col-sm-12 col-xs-12"><a>vegan</a></li>
                <li class="col-md-3 col-sm-12 col-xs-12"><a>snack bundles</a></li>
                <li class="col-md-3 col-sm-12 col-xs-12"><a>variety packs</a></li>
                <li class="col-md-3 col-sm-12 col-xs-12"><a>sharing bags</a></li>
                <li class="col-md-3 col-sm-12 col-xs-12"><a>oat bites</a></li>
                <li class="col-md-3 col-sm-12 col-xs-12"><a>view all snacks</a></li>
                <li class="closed col-sm-12 col-xs-12"><a>close</a></li>
            </ul>
        </div>
        <div class="banner_right">£0.00</div>
    </div>
</div>


<div class="banner_wrap col-md-12 col-sm-12 col-xs-12">
    <div class="banner_img container"></div>
    <div class="banner_box">
        <h2>what if better snacking started here?</h2>
        <h4>reimagine the way you snack with our tasty, wholesome creations - delivered straight to your door</h4>
        <h4>and don't forget to visit your rewards page for exclusive treats and tasty surprises 🏆</h4>
        <button class="btn btn-success">get rewards ></button>
    </div>

</div>

<!--第一个：introducing our new kids cereal bars-->
<div class="cont col-md-12 col-sm-12 col-xs-12">
    <h2>introducing our new kids cereal bars</h2>
    <h3>something kids and grown-ups can both agree on</h3>
    <div class="cereal_bars">
        <div class="container">
           <ul>
               <li>
                   <img src="../images/shop/Bundle-photostyles-_-Group_500x.webp" alt="">
                   <div class="bars_cont">
                       <p>super snackers variety bundle</p>
                       <p class="price price_one">
                           <span>£6.00</span>
                           <button class="btn btn-success">add</button>
                       </p>
                   </div>
               </li>
               <li>
                   <img src="../images/shop/Bundle-photostyles-_-Group_500x.webp" alt="">
                   <div class="bars_cont">
                       <p class="price_title">chocolate super snackers bundle</p>
                       <p>3 x 92g (12 x 23g bars)</p>
                       <p class="price">
                           <span>£6.00</span>
                           <button class="btn btn-success">add</button>
                       </p>
                   </div>
               </li>
               <li>
                   <img src="../images/shop/Bundle-photostyles-_-Group_500x.webp" alt="">
                   <div class="bars_cont">
                       <p class="price_title">strawberry super snackers bundle</p>
                       <p>3 x 92g (12 x 23g bars)</p>
                       <p class="price">
                           <span>£6.00</span>
                           <button class="btn btn-success">add</button>
                       </p>
                   </div>
               </li>
               <li>
                   <img src="../images/shop/Bundle-photostyles-_-Group_500x.webp" alt="">
                   <div class="bars_cont">
                       <p class="price_title">toffee apple super snackers bundle</p>
                       <p>3 x 92g (12 x 23g bars)</p>
                       <p class="price">
                           <span>£6.00</span>
                           <button class="btn btn-success">add</button>
                       </p>
                   </div>
               </li>
           </ul>
        </div>
    </div>
</div>

<!--第二个：introducing our newest creation... choccy wonders!-->
<div class="cont col-md-12 col-sm-12 col-xs-12">
    <h2>introducing our newest creation... choccy wonders!</h2>
    <h3>we know you grazers love chocolate, so we thought it was time to bring you some more</h3>
    <div class="cereal_bars">
        <div class="container">
            <ul>
                <li>
                    <img src="../images/shop/Punnet-Choccy_Wonder_3_Punnets_1_500x.webp" alt="">
                    <div class="bars_cont">
                        <p>super snackers variety bundle</p>
                        <p class="price price_one">
                            <span>£6.00</span>
                            <button class="btn btn-success">add</button>
                        </p>
                    </div>
                </li>
                <li>
                    <img src="../images/shop/Punnet-Choccy_Wonder_Almond_Coconut_500x.webp" alt="">
                    <div class="bars_cont">
                        <p class="price_title">chocolate super snackers bundle</p>
                        <p>3 x 92g (12 x 23g bars)</p>
                        <p class="price">
                            <span>£6.00</span>
                            <button class="btn btn-success">add</button>
                        </p>
                    </div>
                </li>
                <li>
                    <img src="../images/shop/Punnet-Choccy_Wonder_Banana_Peanut_1_500x.webp" alt="">
                    <div class="bars_cont">
                        <p class="price_title">strawberry super snackers bundle</p>
                        <p>3 x 92g (12 x 23g bars)</p>
                        <p class="price">
                            <span>£6.00</span>
                            <button class="btn btn-success">add</button>
                        </p>
                    </div>
                </li>
                <li>
                    <img src="../images/shop/Punnet-Choccy_Wonder_Pretzel_Hazelnut_1_500x.webp" alt="">
                    <div class="bars_cont">
                        <p class="price_title">toffee apple super snackers bundle</p>
                        <p>3 x 92g (12 x 23g bars)</p>
                        <p class="price">
                            <span>£6.00</span>
                            <button class="btn btn-success">add</button>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="choccy_wonders"></div>
    <div class="collection"></div>
    <div class="more"></div>
</div>

<!--第三个：signature flapjack collection-->
<div class="cont col-md-12 col-sm-12 col-xs-12">
    <h2>signature flapjack collection</h2>
    <h3>whole oats with a whole lot of flavour</h3>
    <div class="cereal_bars">
        <div class="container">
            <ul>
                <li>
                    <img src="../images/shop/graze_cocoa_cranberry_protein_flapjack_punnet_1_1_500x.webp" alt="">
                    <div class="bars_cont">
                        <p>super snackers variety bundle</p>
                        <p class="price price_one">
                            <span>£6.00</span>
                            <button class="btn btn-success">add</button>
                        </p>
                    </div>
                </li>
                <li>
                    <img src="../images/shop/graze_honeycomb_flapjack_punnet_3_500x.webp" alt="">
                    <div class="bars_cont">
                        <p class="price_title">chocolate super snackers bundle</p>
                        <p>3 x 92g (12 x 23g bars)</p>
                        <p class="price">
                            <span>£6.00</span>
                            <button class="btn btn-success">add</button>
                        </p>
                    </div>
                </li>
                <li>
                    <img src="../images/shop/graze_maple_protein_flapjack_punnet_2_500x.webp" alt="">
                    <div class="bars_cont">
                        <p class="price_title">strawberry super snackers bundle</p>
                        <p>3 x 92g (12 x 23g bars)</p>
                        <p class="price">
                            <span>£6.00</span>
                            <button class="btn btn-success">add</button>
                        </p>
                    </div>
                </li>
                <li>
                    <img src="../images/shop/berry_protein_flapjack_punnet_1_2_500x.webp" alt="">
                    <div class="bars_cont">
                        <p class="price_title">toffee apple super snackers bundle</p>
                        <p>3 x 92g (12 x 23g bars)</p>
                        <p class="price">
                            <span>£6.00</span>
                            <button class="btn btn-success">add</button>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="choccy_wonders"></div>
    <div class="collection"></div>
    <div class="more"></div>
</div>

<!--第四个：hungry for more?-->
<div class="cont col-md-12 col-sm-12 col-xs-12">
    <h2>hungry for more?</h2>
    <div class="hungry">
        <ul class="col-md-12 col-sm-12 col-xs-12">
            <li class="col-md-4 col-sm-4 col-xs-4">
                <span class="ribbon">new multipacks added</span>
                <img src="../images/shop/Punnet_-_Salt_and_Vinegar_Crunch_545x.webp" alt="">
                <div class="hungry_cont">
                    <h3>crunch range</h3>
                    <p>explore flavours like smoky barbecue, sweet chilli, sea salt & vinegar and many more</p>
                    <button class="btn btn-success">explore</button>
                </div>
            </li>
            <li class="col-md-4 col-sm-4 col-xs-4">
                <img src="../images/shop/Punnet_-_Flapjack_-_Honeycomb_545x.webp" alt="">
                <div class="hungry_cont">
                    <h3>flapjack collection</h3>
                    <p>our most loved honeycomb, cocoa vanilla, lively lemon flavours and more</p>
                    <button class="btn btn-success btn_two">explore</button>
                </div>
            </li>
            <li class="col-md-4 col-sm-4 col-xs-4">
                <img src="../images/shop/Champion-Chomper_4eb19351-db61-431f-9391-51fe25d3fdac_545x.webp" alt="">
                <div class="hungry_cont">
                    <h3>graze bundles</h3>
                    <p>to make your shopping easier, we have put all of our bundles in one place</p>
                    <button class="btn btn-success btn_three">explore</button>
                </div>
            </li>
        </ul>
    </div>
</div>

<p class="tip col-md-12 col-sm-12 col-xs-12">our creations wouldn't be the same without the ideas and inspiration we get from grazers all across the land
    - so don't be shy, we always want to know what you think!</p>

<!--survey-->
<div class="something_new col-md-12 col-sm-12 col-xs-12">
    <div class="col-md-5 col-sm-5 col-xs-5">
        <img src="../images/shop/Thumbs-up_36e74df5-b532-469b-903d-2d3aaf7626ff_545x.webp" alt="">
    </div>
    <div class="somethingnew_right col-md-6 col-sm-6 col-xs-6">
        <h2>we're working on something new</h2>
        <h4>Got a spare minute to help? Click below to take our survey.</h4>
        <button class="btn btn-info">take survey</button>
    </div>
</div>

<div class="instagram col-md-12 col-sm-12 col-xs-12">
    <h2 class="col-md-12 col-sm-12 col-xs-12">follow us on instagram @grazedotcom</h2>
    <ul class="col-md-12 col-sm-12 col-xs-12">
        <li class="col-md-2 col-sm-2 col-xs-2"></li>
        <li class="col-md-2 col-sm-2 col-xs-2"></li>
        <li class="col-md-2 col-sm-2 col-xs-2"></li>
        <li class="col-md-2 col-sm-2 col-xs-2"></li>
        <li class="col-md-2 col-sm-2 col-xs-2"></li>
        <li class="col-md-2 col-sm-2 col-xs-2"></li>
    </ul>
</div>


<footer class="container col-md-12 col-sm-12 col-xs-12">
    <div class="footer_con">
        <div class="title col-md-12 col-sm-12 col-xs-12">
            <ul class="col-md-9 col-md-offset-3 col-sm-9 col-sm-offset-2 col-xs-11 col-xs-offset-1">
                <li>press</li>
                <li>how it works</li>
                <li>health</li>
                <li>gifts</li>
                <li>wholesale</li>
                <li>in stores</li>
                <li>help</li>
            </ul>
        </div>
        <ul class="des col-md-9 col-sm-9 col-xs-9">
            <li><a>terms</a></li>
            <li><a>privacy</a></li>
            <li><a>cookies</a></li>
            <li><a>modern slavery statement</a></li>
            <li><a>students</a></li>
            <li><a>get in touch</a></li>
            <li><a>press</a></li>
            <li><a>grazelabs.com</a></li>
        </ul>
        <p class="col-md-3 col-sm-3 col-xs-3">© 2020 nature delivered ltd</p>
    </div>
</footer>
<!-- and don't forget to visit your rewards page for exclusive treats and tasty surprises 🏆-->
<script src="../js/jquery-3.0.0.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/index.js"></script>
<script src="../js/shop.js"></script>
</body>
</html>